<template>
    <div class="order" draggable="false"   :style='`padding-top:${options.paddingTop/2}px;padding-bottom:${options.paddingBottom/2}px;`'>
        <div>
            <img class="imgPic" src="@/assets/img/editContent/icon-editContent-order.png" alt="">
            <!-- <div class="box_shadow" v-if='!options.imageUrl'>
                <div class="react_box"></div>
                <p>请在右侧添加需要的图片</p>
            </div> -->
            <img class="bgImg" v-if='options.bgUrl' :src="options.bgUrl" alt="">
        
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            options:{}
        }
    },
    props:{
        option:{
            type:Object
        }
    },
    watch:{
        option:function(val){
            this.options =JSON.parse(JSON.stringify(val));
        }
    },
    mounted(){
        this.options =JSON.parse(JSON.stringify(this.option));
    }
}
</script>
<style lang="less" scoped>
    .order{
        width:100%;
        height: auto;
        .imgPic{
            width:100%;
            position:relative;
            z-index:2;
            // height:100%;
        }
        div{
            position:relative;
            overflow: hidden;
            // background:#ffffff;
        }
    }
    .bgImg{
        position:absolute;
        top:0;
        left:0;
        z-index: 1;
        width:100%;
        // height:100%;
    }
</style>